<!--/**
*忘记密码 *
*
* @author LWG
* @date 2022/7/19 15:018
* @since 1.0.0
*/-->
<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="找回密码" left-arrow fixed placeholder @click-left="onClickLeft"/>

    <!-- 步骤条 -->
    <div class="stepPosition">
      <van-steps :active="active">
        <van-step>输入邮箱</van-step>
        <van-step>输入验证码</van-step>
        <van-step>输入新密码</van-step>
        <van-step>成功</van-step>
      </van-steps>

      <!-- 输入邮箱 -->
      <div class="passwordStyle" v-if="this.active == 0">
        <van-field
          v-model="email"
          type=""
          label="邮箱"
          placeholder="请输入邮箱"
          :clearable="true"
        >
        </van-field>
      </div>

      <!-- 输入验证码 -->
      <div class="passwordStyle" v-if="this.active == 1">
        <van-field
          v-model="verification"
          :clearable="true"
          label="验证码"
          placeholder="请输入短信验证码"
          center
        >
          <template #button>
            <van-button size="small" color="#2E86C1"> 重新发送 </van-button>
          </template>
        </van-field>
      </div>

      <!-- 密码框 -->
      <div class="passwordStyle" v-if="this.active == 2">
        <van-field
          v-model="newpassword"
          type="password"
          name="新密码"
          label="新密码"
          placeholder="请输入新密码"
          :clearable="true"
        />
        <van-field
          v-model="confirm"
          type="password"
          name="新密码确认"
          label="确认密码"
          placeholder="请再次输入新密码"
          :clearable="true"
        />
      </div>

      <!-- 成功 -->
      <div
        class="succeed"
        v-animate-css="animationInfinite"
        v-if="this.active == 3"
      >
        成功!
      </div>

      <!-- 按钮 -->
      <van-button
        block
        type="default"
        @click="nextStep"
        color="linear-gradient(to right,#85C1E9,#2E86C1)"
        round
        v-if="this.active != 3"
        >下一步</van-button
      >
      <div style="height: 25px"></div>
      <router-link to="/login">
        <van-button
            block
            type="default"
            color="linear-gradient(to right,#DC143C,#CD853F)"
            round
            v-if="this.active ==3"
        >完成</van-button
        >
      </router-link>
        <van-button
            block
            type="default"
            @click="lastStep"
            color="linear-gradient(to right,#DC143C,#CD853F)"
            round
            v-if="this.active>0&&this.active<3"
        >上一步</van-button
        >

    </div>
  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  data() {
    return {
      username:'',
      active: 0,
      newpassword: "",
      confirm: "",
      email: "",
      verification: "",
      animationInfinite: {
        classes: "flash",
        duration: 3000,
        iteration: 1,
      },
    };
  },
  methods: {
    nextStep() {
      this.username=this.$route.query.username;
      console.log(this.username);
      if (this.active < 3) {
        console.log(this.active);
        let url='';
        let data= {};
        console.log("发请求")
        let num=this.active
        console.log(num)
        switch (this.active){
          case 0: url='http://localhost:10008/userValidation/sendCodeByEmail';
            data={email: this.email};
            break;
          case 1: url='http://localhost:10008/userValidation/checkCode';
            data={
              username: this.email,
              code: this.verification
            };
            break;
          case 2:
            if (this.newpassword!=this.confirm){
              Toast("输入密码不一致")
              this.active--;
              return;
            }
            url='http://localhost:10008/userValidation/updatepwd';
            data={
              username: this.username,
              pwd: this.newpassword
            };
            break;
        }
        console.log("发请求")
        if (this.active==0){
          console.log(this.email)
          this.axios.get(url+"?email="+this.email).then(response=>{
            console.log(response.data.state)
            if (response.data.state==200){
              this.active++;
              Toast("发送成功");
            }else{
              Toast(response.data.message);
              return;
            }
          })
        }else if(this.active==1||this.active==2){
          this.axios.post(url,data).then(response=>{
            console.log(response.data.state)
            if (response.data.state==200){
              this.active++;
            }else {
              Toast(response.data.message);
              return;
            }
          })
        }
      }
    },
    lastStep() {
      if (this.active > 0) {
        this.active--;
        console.log(this.active);
      }
    },
    onClickLeft() {
      history.go(-1)
    },
  },
};
</script>

<style>
.stepPosition {
  padding: 35px 10px;
}
.passwordStyle {
  padding: 40px 10px;
}
.succeed {
  padding: 40px 10px;
  display: flex;
  justify-content: center;
  align-content: center;
  font-size: 40px;
  color: #32cd32;
}
</style>